<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Configure Farmbot's Network </title>
    <link rel="stylesheet" href="/styles.css">
    <script>
      function showPassword() {
          var x = document.getElementById("password");
          x.type = (x.type === "password") ? "text" : "password";
      }
    </script>
  </head>

  <body>
    <h1>Configure FarmBot <%= version %> </h1>
    <div class="widget">
      <div class="widget-header"> <h5>Configure Wireless</h5> </div>
      <div class="widget-content">
        <form action=<%= post_action %> method="post" id="ssid_select_form">
          <fieldset>
            <label>Network Name</label>
            <input name="ssid_fake" type="text" value="<%= ssid %>" disabled>
            <input name="ssid" type="text" value="<%= ssid %>" hidden>
            <input name="security" hidden=true value="<%= security %>">
            <input name="ifname",  hidden=true value="<%= ifname %>">

            <label for="identity"> IDENTITY </label>
            <input type="text" name="identity" id="identity" required>

            <label for="password"> PASSWORD </label>
            <div class="psk-input-group">
              <input type="password" name="password" id="password">
              <img class="eye-icon" src="icon_eye.svg"
                onclick="showPassword()" title="Show password">
            </div>
          </fieldset>

          <%= advanced_network %>

          <div class="button"> <input type="submit" value="next"> </div>
        </form>
      </div>
    </div>
  </body>
</html>
